<div>
    <h1 mat-dialog-title style="display:inline-block;cursor: move" mat-dialog-draggable>{{'chart.config-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div style="display: inline-block; width: 100%">
        <div class="panelTop">
            <div class="toolbox-toadd">
                <button mat-icon-button (click)="onEditChart(null)">
                    <mat-icon>add_circle_outline</mat-icon>
                </button>
            </div>
            <div *ngFor="let chart of data.charts; index as i" class="mychips" (click)="onSelectChart(chart)" [ngClass]="isChartSelected(chart)">
                <mat-icon (click)="onSelectChart(chart)" [matMenuTriggerFor]="optionsgMenu">more_vert</mat-icon>
                <mat-menu #optionsgMenu [overlapTrigger]="false">
                    <button mat-menu-item (click)="onAddChartLine(chart)" style="font-size: 14px;">{{'chart.config-addline' | translate}}</button>
                    <button mat-menu-item (click)="onEditChart(chart)" style="font-size: 14px;">{{'chart.config-rename' | translate}}</button>
                </mat-menu>
                <span>
                    {{chart.name}}
                </span>
                <mat-icon (click)="onSelectChart(chart);onRemoveChart(i)">cancel</mat-icon>
            </div>
        </div>
        <div class="panelBottom">
            <mat-list class="list">
                <mat-list-item class="list-item list-header">
                    <span style="width: 25px;"></span>
                    <span style="width: 30%;max-width: 30%;">{{'chart.config-line-name' | translate}}</span>
                    <span style="width: 25%;max-width: 25%;">{{'chart.config-line-label' | translate}}</span>
                    <span style="width: 25%;max-width: 20%;">{{'chart.config-devices' | translate}}</span>
                    <span style="width: 10%;max-width: 5%;">{{'chart.config-line-yaxis' | translate}}</span>
                    <span style="width: 10%;max-width: 10%;">{{'chart.config-line-interpolation' | translate}}</span>
                    <span style="width: 10%;max-width: 5%;">{{'chart.config-line-color' | translate}}</span>
                    <span style="width: 10%;max-width: 5%;">{{'chart.config-line-fill' | translate}}</span>
                </mat-list-item>
                <div class="list-panel">
                    <mat-list-item *ngFor="let line of selectedChart.lines" class="list-item list-item-hover" (click)="editChartLine(line)">
                        <mat-icon (click)="$event.stopPropagation();removeChartLine(line)" style="color:gray;font-size: 20px">delete</mat-icon>
                        <div class="list-item-text" style="width: 30%;max-width: 30%;">
                            <span>{{getDeviceTagName(line)}}</span>
                        </div>
                        <div class="list-item-text" style="width: 25%;max-width: 25%;">
                            <span>{{line.label}}</span>
                        </div>                        
                        <div class="list-item-text" style="width: 25%;max-width: 20%;">
                            <span>{{line.device}}</span>
                        </div>
                        <div class="list-item-text" style="width: 10%;max-width: 5%;">
                            <span>{{line.yaxis}}</span>
                        </div>
                        <div class="list-item-text" style="width: 10%;max-width: 10%;">
                            <span>{{getLineInterpolationName(line)}}</span>
                        </div>
                        <div [style.background-color]="line.color" style="height:20px; width:5%"></div>
                        <div [style.background-color]="line.fill" style="height:20px; width:5%"></div>
                    </mat-list-item>
                </div>
            </mat-list>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>
